<template>
  <div class="news-title">
    <div class="header mb-8">
      <t-avatar
        class="head-img img-cover mr-12"
        :src="obj.head_img_url"
        alt=""
      />
      <p class="nickname mr-4">{{ obj.author }}</p>
      <icon v-if="obj.is_bigv" class="mr-4" size="12px" name="ic_big_v_yellow" />
      <p class="time">· {{ obj.release_timestamp | duration }}</p>
    </div>
    <p class="title mb-4">
      {{ obj.title }}
    </p>
    <p v-if="(obj.tags && obj.tags.length > 0)" class="tag mb-8">{{ obj.tags | tagFilter}}</p>
    <p class="num mb-24">
      <icon class="mr-2" size="12px" name="ic_read" />{{ obj.click_count }}
    </p>
  </div>
</template>

<script>
import TAvatar from './TAvatar.vue';

export default {
  components: {
    TAvatar
  },

  props: {
    obj: {
      type: Object,
      default: () => {}
    }
  }
};
</script>

<style lang="scss" scoped>
.news-title {
  padding: 0 16px;
  border-bottom: 1px solid rgba(12, 12, 28, 0.08);
}

.header {
  display: flex;
  align-items: center;
  height: 32px;

  .head-img {
    width: 32px;
    height: 32px;
    border: 0.5px solid rgba(42, 60, 88, 0.1);
    border-radius: 100px;
  }

  .nickname {
    font-size: 13px;
    color: rgba(12, 12, 28, 0.7);
    font-weight: 500;
  }

  .time {
    font-size: 12px;
    color: rgba(12, 12, 28, 0.5);
  }
}

.title {
  font-size: 24px;
  color: #0c0c1c;
  letter-spacing: 0;
  line-height: 40px;
  font-weight: 500;
}

.tag {
  font-size: 14px;
  color: rgba(12, 12, 28, 0.7);
  letter-spacing: 0;
  line-height: 20px;
}

.num {
  display: flex;
  align-items: center;
  height: 16px;
  font-size: 12px;
  color: rgba(12, 12, 28, 0.7);
  letter-spacing: 0;
  line-height: 16px;
}
</style>
